Mobility Mapper Business Portal
The purpose of this project is to provide a business portal that integrates with the Mobility Mapper platform, which generates accessible routes for users of wheeled mobility devices.
The portal provides a user-friendly interface for accessible businesses to create a listing,
so they appear in search results on the Mobility Mapper platform. The listing includes details about their accessibility features, location, and contact information.
The portal allows businesses to select from different membership tiers, each offering varying levels of visibility and benefits on the Mobility Mapper platform.
Businesses can request verification of their accessibility features, which involves wheelers visiting the business to assess and confirm the features listed. Verified businesses receive a badge on their listing, enhancing their credibility and attractiveness to users seeking accessible options.
Visit the deployed website here.
Table of Contents
User Experience (UX)
Project Goals
- Provide a business portal for accessible venues to register, create, and manage business listings with contact details, map location, categories, descriptions, and opening hours.
- Enable businesses to select and manage membership tiers (Free / Standard / Premium), with each tier affecting listing visibility and available features.
- Provide a dashboard for business owners to manage listings, view membership status, and track verification progress.
- Provide a dashboard for wheelers (users of wheeled mobility devices) to view verification requests, submit reports, and track their activity.
- Implement business search functionality that returns business data and locations on a map, randomises results, and ranks by membership tier (premium → standard → free).
- Support advanced search and filtering for accessible businesses, including map-based search and accessibility feature filters.
- Enable a wheeler-led verification workflow: verified wheelers can apply for verification, submit on-site reports (photos and notes), and after required independent verifications, a badge is awarded to the business.
- Allow wheelers to upload photos as evidence for verification, with support for associating photos to specific accessibility features.
- Integrate with Stripe for secure payment processing of memberships and verification fees, using PaymentIntent and webhook flows.
- Support admin workflows for approving new business listings and verification requests, with automated email notifications for relevant actions.
- Ensure data integrity and user experience: provide clear validation messages, transactional saves for critical operations, and use Post/Redirect/Get patterns with user feedback messages for form flows.
- Ensure accessibility and responsive design throughout the portal for all users, following best practices for inclusive web design.
- Provide fixture scripts and utilities for generating demo data and loading initial datasets for development and testing.
- Maintain robust authentication and authorization, ensuring users only access features appropriate to their role (business, wheeler, admin).
- Log key actions and errors for auditability and easier debugging.
- Provide fixture scripts and utilities for generating demo data and loading initial datasets for development and testing.
- Provide comprehensive test coverage for core workflows, including business registration, verification, payments, and admin approval.
User Goals
-
Create an account
As a User I want to register an account so that I can access all portal features.
-
Edit my profile
As a User, I want to be able to update my personal details, change my password, and manage my profile photo so that my account information is always current.
-
Contact support
As a User, I want to contact the Mobility Mapper team for help, feedback, or suggestions.
-
Register a business
As a Business Owner, I want to register my business so that it can be listed on the Mobility Mapper platform, found by wheelers, and managed through my dashboard.
-
Manage business details
As a Business Owner, I want to add, edit, or remove my business details, including address, categories, accessibility features, opening hours, and special offers, so that my information is always accurate and up to date.
-
Manage membership tier
As a Business Owner, I want to be able to view and upgrade my membership tier so I can unlock more features and increase my business’s visibility in search results.
-
Request accessibility verification
As a Business Owner, I want to request independent verification of my business’s accessibility features by verified wheelers, so I can earn a "Verified by Wheelers" badge and attract more customers.
-
Track verification progress and reports
As a Business Owner, I want to view the status of my verification request and access completed verification reports, so I can see detailed feedback.
-
View and manage dashboard and membership status
As a Business Owner, I want to access a dashboard showing my business details, membership status, payment history, and verification progress, so I can manage everything in one place.
-
Make secure payments
As a Business Owner, I want to pay for memberships or verification fees securely online using Stripe, and receive receipts and payment confirmations.
-
Search for accessible businesses
As a Wheeler, I want to search for accessible businesses using filters, categories, accessibility features, and an interactive map, so I can find suitable venues in my area.
-
View detailed business listings and verification status
As a User, I want to see comprehensive business listings, including accessibility features, opening hours, verification badges, and membership tier, so I can make informed choices.
-
Apply to verify accessible businesses
As a Wheeler, I want to browse available verification requests, apply to verify businesses, and receive approval so I can contribute to the community and earn rewards.
-
Track and manage verification applications
As a Wheeler, I want to view the status of my verification applications and see which businesses I am approved to verify, so I can plan my visits and manage my activity.
-
Submit on-site verification reports
As a Wheeler, I want to submit detailed verification reports while visiting a business, including notes, accessibility feature confirmations, and photo evidence linked to specific features.
-
Track my verification history and activity
As a Wheeler, I want to view my verification applications, links to report forms and business details, submitted reports, and earned rewards in a dedicated hub.
-
Receive clear feedback and error messages
As a User, I want to see clear success, error, and validation messages throughout the portal, so I always know the outcome of my actions.
Structure of the Mobility Mapper Business Portal
The structure of the Mobility Mapper Business Portal is illustrated in the diagram below. The main entry point is the Loading Page, where users can choose to sign up, sign in, or contact support. Once signed in, users are directed to their personal dashboard, which serves as the central hub for both business users and wheelers.
From the personal dashboard, users can access key features such as searching for accessible businesses, viewing and editing their profile, and changing their password.
Business users have the option to register a business, and select a membership tier. If the membership is paid, they proceed to checkout. They will then have access to a dedicated Business Owner Dashboard. Here, they can manage their business details, view or upgrade their membership tier, and request verification of their accessibility features.
The checkout process is integrated for membership upgrades (solid line) and verification requests (dashed line), with secure payment handled via Stripe.
The business search and map functionality is available to all logged-in users, allowing them to filter and explore accessible venues. Each business listing provides detailed information, including accessibility features and verification status. The level of detail and visibility is determined by the business's membership tier.
For businesses that have requested verification of their accessibility features, their listing in the search results contains a link for wheelers to apply to carry out the verification. After submission, the wheeler can view the status of their application on the Accessibility Verification Hub.
Once approved, the wheeler can complete and submit the verification report form, for an admin to review and approve. Upon approval, both the wheeler and the business can view the completed verification report. After three wheelers have completed the verification process, the business receives a verified badge on their listing.
The structure is designed to maintain clear separation between business management and wheeler verification workflows, ensuring a seamless user experience for both user types.
Users can navigate between the various sections of the portal using a navigation bar, ensuring consistent access to all features. The contact form is accessible from the home page and throughout the site, providing support whenever needed.
There is a custom 404 error page for handling invalid URLs, ensuring users are guided back to the user dashboard.
Entity Relationship Diagram
The ERD below was created using Mermaid.
This relational database is managed by PostgreSQL with a PostGIS extension for the geospatial data used in business listings and search functionality.
erDiagram
direction LR
AUTH_USER {
UUID id
string username
string email
string password
boolean is_active
boolean is_staff
datetime date_joined
}
USERPROFILE {
UUID id
UUID user_id
string full_name
string phone
string role
string avatar
}
BUSINESS {
UUID id
UUID owner_id
string name
string description
string address
string city
string postcode
geometry location
UUID category_id
UUID membership_tier_id
boolean is_verified
boolean is_active
datetime created_at
}
BUSINESSCATEGORY {
UUID id
string name
string description
}
MEMBERSHIPTIER {
UUID id
string name
decimal price
string description
integer visibility_rank
}
ACCESSIBILITYFEATURE {
UUID id
string name
string description
}
BUSINESS_ACCESSIBILITYFEATURE {
UUID id
UUID business_id
UUID accessibilityfeature_id
string value
}
WHEELER_VERIFICATION_APPLICATION {
UUID id
UUID business_id
UUID wheeler_id
string status
datetime applied_at
datetime approved_at
}
WHEELER_VERIFICATION_REPORT {
UUID id
UUID application_id
UUID wheeler_id
UUID business_id
text notes
datetime submitted_at
boolean is_approved
}
VERIFICATION_PHOTO {
UUID id
UUID report_id
UUID feature_id
string image_url
string caption
}
PAYMENT {
UUID id
UUID user_id
UUID business_id
UUID membership_tier_id
decimal amount
string stripe_payment_intent
string status
datetime created_at
}
AUTH_USER ||--o{ USERPROFILE : has
USERPROFILE ||--o{ BUSINESS : owns
BUSINESS }o--|| BUSINESSCATEGORY : category
BUSINESS }o--|| MEMBERSHIPTIER : membership
BUSINESS ||--o{ BUSINESS_ACCESSIBILITYFEATURE : has
ACCESSIBILITYFEATURE ||--o{ BUSINESS_ACCESSIBILITYFEATURE : is
BUSINESS ||--o{ WHEELER_VERIFICATION_APPLICATION : has
USERPROFILE ||--o{ WHEELER_VERIFICATION_APPLICATION : applies
WHEELER_VERIFICATION_APPLICATION ||--o{ WHEELER_VERIFICATION_REPORT : has
USERPROFILE ||--o{ WHEELER_VERIFICATION_REPORT : submits
BUSINESS ||--o{ WHEELER_VERIFICATION_REPORT : for
WHEELER_VERIFICATION_REPORT ||--o{ VERIFICATION_PHOTO : includes
ACCESSIBILITYFEATURE ||--o{ VERIFICATION_PHOTO : shows
USERPROFILE ||--o{ PAYMENT : makes
BUSINESS ||--o{ PAYMENT : for
MEMBERSHIPTIER ||--o{ PAYMENT : upgrades
AuthUser Model
Extends Django’s built-in user model to represent all users of the portal, including business owners and wheelers.
Attributes:
- id: Unique identifier for the user.
- username: User’s login name.
- email: User’s email address.
- password: Hashed password.
- is_active: Indicates if the user account is active.
- is_staff: Indicates if the user has staff/admin privileges.
- date_joined: Date the user registered.
UserProfile Model
Stores additional profile information for each user, including their role (business owner or wheeler).
Attributes:
- id: Unique identifier for the profile.
- user_id: Foreign key to AuthUser.
- full_name: User’s full name.
- phone: Contact phone number.
- role: User’s role (e.g., business, wheeler).
- avatar: Profile image.
Business Model
Represents a business listed on the platform.
Attributes:
- id: Unique identifier for the business.
- owner_id: Foreign key to UserProfile (the business owner).
- name: Business name.
- description: Description of the business.
- address, city, postcode: Location details.
- location: Geospatial point for mapping.
- category_id: Foreign key to BusinessCategory.
- membership_tier_id: Foreign key to MembershipTier.
- is_verified: Indicates if the business is verified.
- is_active: Indicates if the business is active.
- created_at: Date the business was added.
BusinessCategory Model
Defines categories for businesses (e.g., café, shop).
Attributes:
- id: Unique identifier.
- name: Category name.
- description: Category description.
MembershipTier Model
Represents the different membership levels available to businesses.
Attributes:
- id: Unique identifier.
- name: Tier name (e.g., Free, Standard, Premium).
- price: Cost of the tier.
- description: Details about the tier.
- visibility_rank: Determines listing priority.
AccessibilityFeature Model
Lists possible accessibility features a business can have (e.g., step-free access, accessible toilet).
Attributes:
- id: Unique identifier.
- name: Feature name.
- description: Feature description.
BusinessAccessibilityFeature Model
Associates specific accessibility features with a business.
Attributes:
- id: Unique identifier.
- business_id: Foreign key to Business.
- accessibilityfeature_id: Foreign key to AccessibilityFeature.
- value: Details or status of the feature.
WheelerVerificationApplication Model
Tracks applications by wheelers to verify a business’s accessibility.
Attributes:
- id: Unique identifier.
- business_id: Foreign key to Business.
- wheeler_id: Foreign key to UserProfile (the wheeler).
- status: Application status (e.g., pending, approved).
- applied_at: Date of application.
- approved_at: Date of approval.
WheelerVerificationReport Model
Represents a verification report submitted by a wheeler after visiting a business.
Attributes:
- id: Unique identifier.
- application_id: Foreign key to WheelerVerificationApplication.
- wheeler_id: Foreign key to UserProfile.
- business_id: Foreign key to Business.
- notes: Report notes.
- submitted_at: Date submitted.
- is_approved: Indicates if the report is approved by admin.
VerificationPhoto Model
Stores photos submitted as part of a verification report, optionally linked to a specific accessibility feature.
Attributes:
- id: Unique identifier.
- report_id: Foreign key to WheelerVerificationReport.
- feature_id: Foreign key to AccessibilityFeature.
- image_url: Photo file or URL.
- caption: Description of the photo.
Payment Model
Tracks payments made by users for memberships or verification requests.
Attributes:
- id: Unique identifier.
- user_id: Foreign key to UserProfile.
- business_id: Foreign key to Business.
- membership_tier_id: Foreign key to MembershipTier.
- amount: Payment amount.
- stripe_payment_intent: Stripe payment reference.
- status: Payment status.
- created_at: Date of payment.
Relationships:
Each user has one profile; each profile can own multiple businesses.
Businesses belong to a category and a membership tier, and can have many accessibility features.
Wheelers can apply to verify businesses and submit verification reports, which may include photos.
Payments are linked to users, businesses, and membership tiers.
Wireframes
Wireframes were created using Balsamiq to plan the design of the web application.
| Page |
Desktop |
Mobile |
| Landing Page |
 |
 |
| Sign Up |
 |
 |
| Personal Dashboard |
 |
 |
| Edit Profile |
 |
 |
| Accessible Business Search |
 |
 |
| Business Details |
 |
 |
| Register Business |
 |
 |
| Business Owner Dashboard |
 |
 |
| Upgrade Membership |
 |
 |
| Checkout |
 |
 |
| Request Wheeler Verification |
 |
 |
| Accessibility Verification Hub |
 |
 |
| Verification Application |
 |
 |
| Verification Report Form |
 |
 |
| Completed Verification Report |
 |
 |
Colour Scheme
The colour scheme for this website matches that of the main Mobility Mapper platform, using burnt orange (#D35400) as the primary colour, complemented by mango, coffee, brown and khaki green.
Typography
The font used on the website is Open Sans with Sans Serif as the backup in case the former is not imported successfully.
Features
General
- Mobile-first, fully responsive design for seamless use on all device sizes.
- Consistent styling and layout across the site, matching the Mobility Mapper brand.
- All pages inherit from a single base template, ensuring a unified look and feel across the portal.
- The navigation bar and sidebar dynamically adjust based on user authentication and role (business owner, wheeler, or admin).
- Success and error messages are displayed as Bootstrap toasts in the top-right corner, with different styles for each message type. Toasts are automatically shown and can be dismissed by the user.
- Multiple messages can be shown at once, each in its own alert box, providing immediate feedback for actions like form submissions, logins, payments, and errors.
- All forms use Django Crispy Forms for consistent, accessible styling and validation.
- Accessibility best practices are followed throughout, including proper color contrast, keyboard navigation, ARIA labels, semantic HTML, and skip links.
- CSRF tokens are included in all forms for security.
- Page title is dynamically set and displayed in the header and browser tab.
- Custom CSS and JS are loaded for site-specific styles and functionality, with support for per-page additions.
- Main content is rendered within a central container for consistent spacing and alignment.
- External libraries include Bootstrap 5, MapLibre GL JS, Ordnance Survey branding, Choices.js, and Stripe.js for secure payment processing.
- Multiple favicon sizes and meta tags are included for cross-device/browser compatibility and SEO.
- Consistent branding with the Mobility Mapper logo and color scheme in the navigation and header.
Navigation Bar & Sidebar Menu
- Displays the Mobility Mapper logo and a hamburger menu icon on mobile devices.
- On large screens, a sidebar navigation is always visible; on smaller screens, a top navigation bar with a hamburger menu toggles the navigation links.
- Navigation links adapt based on user authentication and role, showing/hiding links such as "Business Dashboard," "Register Your Business," and "Accessibility Verification Hub."
- "Contact Us" is always available.
- The current page is visually highlighted in the navigation for clear orientation.
- On extra-large screens, the user’s name and profile photo (if available) are shown in the header for authenticated users.
Home Page
- The landing page welcomes users with a pertinent hero image, a prominent headline, and a motivational tagline.
- Includes a brief introduction to the Mobility Mapper Business Portal.
- Three clear call-to-action buttons, all styled for accessibility and prominence.
- The main section highlights the portal's three core actions with responsive cards:
- A testimonial blockquote at the bottom builds trust and community.
- The layout is fully responsive, ensuring a seamless experience on all devices.
Registration & Authentication
- Sign Up and Sign In pages use Django Allauth for secure, user-friendly authentication.
-
The Sign Up form is presented in a centered card for clarity and focus, styled with Bootstrap and Crispy Forms for accessibility and consistency.
-
If the user already has an account, a clear link is provided to the sign-in page.
- Users provide first name, last name, email (with confirmation), and username.
- The form asks if the user is a business owner and/or a wheeler (user of a wheeled mobility device), with dynamic fields for mobility device type and "other" details if relevant.
- Users can select their country, county, and age group, and optionally upload a profile photo.
- Password fields enforce strong password requirements and confirmation.
- Helpful validation and error messages are shown inline for each field.
- After submitting the form, users are sent an email containing a link to verify their email address.
- Password reset and change password flows are included, with clear feedback at each step.
- Users can securely sign out, with confirmation and feedback messages.
Personal Dashboard
- After login, users are directed to a personalized dashboard displaying their profile photo, name, and key account information.
- The dashboard is organized into clear sections with responsive cards for easy navigation on all devices.
- The dashboard uses Bootstrap cards, tables, and buttons for a clean, modern, and accessible layout.
- All actions and information are dynamically tailored to the user’s role and activity, ensuring a relevant and streamlined experience.
Profile Details
- Shows Profile photo, name, username, email, country, and (if available) county and age group.
- For wheelers, displays mobility device information, as shown above.
- For business owners, displays a link to their business dashboard if they have a registered business, as shown below.
Account Actions
- Quick access buttons to edit profile, change password, and (if eligible) register a business.
- If the user is a wheeler or has verification activity, a button links to the Accessibility Verification Hub.
Wheeler Verification Activity
- Wheelers see lists of businesses they are approved to verify and those they have applied to verify, with direct links to start verification, view business details, or cancel requests.
- Each business entry includes name, categories, address, and action buttons.
Instructions & Incentives
- A dedicated card explains the wheeler verification process, including the requirement to upload photos, what features to check, and the reward for each completed report.
- Encourages wheelers to contribute and provides a direct link to the accessible business search page.
Edit Profile Page
- The Edit Profile page allows users to update their personal information, preferences, and profile photo in a clear, accessible form.
- The form is presented in a centered, visually distinct container, styled with Bootstrap and Crispy Forms for consistency and usability.
Profile Photo:
- Users can upload a new profile photo (PNG, JPEG, or WEBP, square, max 5MB), change their existing photo, or delete it without replacing.
- The current photo is previewed with an option to remove it.
Personal Details:
- Editable fields for first name, last name, country, and (if applicable) county.
- Country selection dynamically toggles the visibility of the county field - it is only visible for the UK.
User Roles:
- Users can indicate if they are a business owner and/or a wheeler (user of a wheeled mobility device).
- If "yes" is selected for the wheeled mobility device user question, a dynamic section appears for selecting one or more mobility devices.
- If "Other" is chosen among mobility devices, an additional input appears for custom device details.
Form Features:
- All fields include inline validation and clear error messages.
- The form uses CSRF protection and is fully accessible via keyboard and screen readers.
- JavaScript enhances the form for dynamic field visibility and resets, ensuring a smooth user experience.
Actions:
- "Save Changes" button submits the form; "Cancel" returns to the dashboard without saving.
- After successful update, users are redirected to their dashboard with a confirmation message.
Business Registration Page
- The Business Registration page allows business owners to create a detailed, public-facing listing for their accessible venue.
- The registration form is presented in a visually distinct, centered container for clarity and focus, styled with Bootstrap and Crispy Forms for accessibility and consistency.
Form Features:
-
Collects essential business information: name, address, contact details, website, and description.
-
Users select one or more business categories from a grouped multi-select dropdown, with an "Other" option for custom categories.
-
Accessibility features are selected from a multi-select dropdown, enhanced with Choices.js for usability.
-
Opening hours are set using an interactive table widget, allowing multiple periods per day and easy copying of hours between days.
-
Special offers for wheelers can be added in a dedicated field.
-
All form fields include inline validation and clear error messages.
-
Membership Tier Selection:
-
Users choose a membership tier (Free, Standard, Premium) by clicking on visually engaging cards, each displaying the tier’s benefits and price.
-
Only one tier can be selected at a time, and the selection is keyboard accessible.
-
The selected tier determines the business’s visibility and available features in search results.
-
Accessibility & Guidance:
-
The page provides clear guidance on how the information will be used and encourages complete, accurate listings for better visibility.
-
A preview badge ("Verified by Wheelers") is shown to illustrate the benefit of successful verification.
After Submission
-
Upon successful registration, the business owner is redirected to their Business Dashboard, where they can manage their listing, request verification, and upgrade membership.
-
The form uses CSRF protection and is fully accessible via keyboard and screen readers.
-
All interactive elements (dropdowns, cards, opening hours) are enhanced with JavaScript for a smooth user experience.
s
Business Dashboard
- The Business Dashboard provides business owners with a comprehensive overview and management interface for their business listing.
Header Section
- Displays the business logo (or a placeholder if not set), business name, and a clear "Dashboard" label.
Business Details
- Owner’s name, business categories, address, website, public and private contact details, and social media links are shown in a responsive table.
- If any information is missing, prompts and quick links are provided to add or edit details.
Location Map
- An interactive map displays the business’s location for easy verification and public visibility.
Description & Services
- Shows the business description, services offered, and any special offers, with prompts to add missing information.
Accessibility Features
- Lists all accessibility features associated with the business as visually distinct badges.
- If no features are set, a prompt is shown to add them.
Opening Hours
- Displays opening hours in a responsive table, with clear indication of closed days.
Prompts to add or edit hours if not set.
Membership Tier
- Shows the current membership tier (Free, Standard, Premium) with tailored messages and upgrade options.
- Provides direct links to upgrade or view current membership details.
Accessibility Verification
- Shows the current verification status (e.g., "Verified by Wheelers", "Verification in progress", or "Verification requested").
- Allows business owners to request a new verification if not already requested.
- Lists all completed verification reports with links to view each report.
Action Buttons
- Prominent buttons to edit or delete the business listing.
No Business Registered
- If the user has not registered a business, a clear message and a "Register Now" button are shown.
- The dashboard uses Bootstrap cards, tables, badges, and buttons for a clean, modern, and accessible layout.
- All actions and information are dynamically tailored to the business’s current data, ensuring a relevant and streamlined experience for business owners.
Edit Business Page
- The Edit Business page allows business owners to update all details of their existing business listing in a user-friendly, accessible form.
- The form is presented in a visually distinct, centered container, styled with Bootstrap and Crispy Forms for clarity and consistency.
- Form Features:
- All business fields are pre-filled with the current data, allowing for quick edits to name, address, contact details, website, description, and special offers.
- Business categories and accessibility features are enhanced with Choices.js for multi-select, easy removal, and search, with clear placeholder text.
- An "Other" category field dynamically appears if selected, allowing custom category input.
- Accessibility features can be updated at any time, with visually distinct badges shown for each selected feature.
- The opening hours widget allows for intuitive editing of hours, including multiple periods per day and easy copying between days.
- Textareas for description and services auto-resize as the user types for better usability.
- All form fields include inline validation and clear error messages.
- Accessibility & Guidance:
- The page provides guidance on how to complete each section and encourages accurate, complete information for better visibility.
- All interactive elements are fully accessible via keyboard and screen readers.
- After Submission:
- Upon successful update, the business owner is redirected to the Business Dashboard with a confirmation message.
- The form uses CSRF protection and is enhanced with JavaScript for a smooth, modern editing experience.
<img alt="Edit Business Page" src="/readme-files/edit_business_desktop.png" style=
View Existing Membership Page
- The View Existing Membership page provides business owners with a clear summary of their current membership tier and its associated benefits.
- The page is presented in a visually distinct, centered container for clarity and focus, styled with Bootstrap for consistency.
- Membership Details:
- Displays the current membership tier (Free, Standard, or Premium) in a prominent section.
- Shows the membership start and end dates in a readable format.
- Lists all benefits associated with the current tier in a bullet-point list for easy reference.
- Upgrade Option:
- A prominent "Upgrade Membership" button is provided, allowing business owners to seamlessly navigate to the membership upgrade page.
- The layout is fully responsive and accessible, ensuring all users can easily review and manage their membership status.
<img alt="View Existing Membership Page" src="/readme-files/view_existing_membership_desktop.png" style
Upgrade Membership Page
- The Upgrade Membership page allows business owners to review their current membership tier and explore available upgrade options in a clear, user-friendly interface.
- The page is presented in a visually distinct, centered container for clarity and focus, styled with Bootstrap cards for consistency and accessibility.
- Current Membership:
- Displays the user's current membership tier (Free, Standard, or Premium) with a summary of included benefits in a bullet-point list.
- Upgrade Options:
- Lists all available upgrade tiers, each presented in its own card.
- Each card includes:
- The tier name (e.g., Standard, Premium).
- A detailed list of benefits associated with that tier.
- The annual price, clearly displayed.
- A prominent "Upgrade to [Tier]" button that takes the user directly to the Stripe-powered checkout for the selected tier.
- If multiple upgrade options are available, a message indicates this.
- Navigation:
- A "Return to Business Dashboard" button allows users to easily go back without making changes.
- The layout is fully responsive and accessible, ensuring all users can easily compare tiers and upgrade their membership.
Accessible Business Search & Map
- All logged-in users can search for accessible businesses using a powerful, interactive map and filter interface.
- The search panel allows users to:
- Enter free-text queries to find businesses by name, category, or location.
- Filter results by multiple accessibility features using a dynamic multi-select dropdown.
- Instantly clear search terms or filters with dedicated buttons.
- The map (powered by MapLibre GL JS and Ordnance Survey tiles) displays business locations as interactive markers.
- Clicking a marker shows a popup with business details and a "Show more info" link.
- On mobile, detailed business info appears in a swipeable overlay for easy viewing.
- Search results are also filtered based on the current map view: only businesses visible within the map’s bounds are shown in the results list, making it easy to explore accessible venues in a specific area.
- Results are shown as a responsive list:
- Each business displays its name, categories, address, and badges for accessibility features and verification status.
- The visibility of certain details and actions (such as logo, contact info, website, and special offers) depends on the business’s membership tier—higher tiers unlock more visibility and features in the search results.
- The order of businesses is determined by membership tier (Premium first, then Standard, then Free), but results are randomized within each tier for fairness.
- Businesses that have requested verification show a prominent badge for wheelers to click to apply and earn a reward.
- Clicking a business expands an accordion with full details: accessibility features, website, contact info, description, services, special offers, and opening hours.
- The interface is fully responsive:
- On desktop, the map and results list are shown side-by-side.
- On mobile, users can toggle between map view and list view with dedicated buttons.
- Search results are updated in real time as users type or adjust filters, with a loading spinner for feedback.
- All actions are accessible via keyboard and screen readers, with ARIA labels and semantic HTML.
- Error handling ensures users see clear messages if no results are found or if there is a problem with the search.
Accessibility Verification Workflow
- Businesses can request verification of their accessibility features.
- Wheelers can view available verification requests, apply, and track their application status in the Accessibility Verification Hub.
- Approved wheelers can submit detailed verification reports, including notes and photos linked to specific features.
- Admins review and approve reports; after three independent verifications, the business receives a verified badge.
- Both wheelers and businesses can view completed verification reports.
Request Wheeler Verification Page
- The Request Wheeler Verification page enables business owners to initiate the process of having their business’s accessibility independently verified by community members ("Wheelers").
- The page is presented in a clear, focused container with a prominent heading and explanatory sections.
- What is Wheeler Verification?
- Explains that requesting verification means three Wheelers will visit the business, confirm accessibility features, and submit short accessibility reports.
- Cost Transparency:
- Clearly displays the cost of the verification request based on the business’s membership tier.
- If the business is on a Premium tier, the verification is free; otherwise, the exact price is shown.
- Badge Preview:
- Shows a preview of the "Verified by Wheelers" badge that will be awarded and displayed on the business’s public and private profiles after successful verification.
- Explains the value of the badge for building trust with potential customers.
- How it Works:
- Describes the verification workflow: business owners can track verification status and view all reports from their Business Dashboard.
- While waiting for verification, a special badge appears next to the business in search results, inviting Wheelers to apply and highlighting the reward (e.g., a £10 Amazon voucher).
- Only verified Wheelers can apply, and all reports are checked for accuracy before approval.
- Actions:
- Includes a secure form with CSRF protection to submit the verification request.
- Provides a "Request Verification" button and a "Return to Dashboard" button for easy navigation.
- The layout is fully responsive and accessible, ensuring all business owners can easily understand and initiate the verification process.
<img alt="Request Wheeler Verification Page" src="/readme-
Accessibility Verification Application Page
- The Accessibility Verification Application page enables wheelers to apply to verify the accessibility features of a specific business.
- The page is presented in a clear, focused container with a prominent heading and explanatory sections.
- Business Overview:
- Displays the business name and full address in a highlighted section.
- Lists all accessibility features specified by the business as visually distinct badges.
- Verification Process Explanation:
- Explains that three independent wheeler verifications are required for a business to earn the "Verified by Wheelers" badge, which is previewed on the page.
- Describes the value of the badge for helping customers identify trusted accessible venues in search results.
- Wheeler Responsibilities:
- Outlines the requirements for wheelers:
- Visit the business in person using their wheeled mobility device.
- Take one clear photo of each accessibility feature.
- Write a brief report about the visit and features verified.
- Take a photo of themselves at the location (for internal verification only).
- States the reward: a £10 Amazon voucher for each completed and approved verification.
- Application Form:
- Users confirm their application by submitting a secure form with CSRF protection.
- A "Confirm Application" button submits the request, and a "Cancel" button returns to the business search.
- Feedback & Accessibility:
- Success, info, or error messages are displayed at the top of the page for immediate feedback.
- The layout is fully responsive and accessible, ensuring all users can easily understand and complete the application process.
<img alt="Accessibility Verification Application Page" src="/readme-files/wheeler_verification_application_desktop.png" style
Accessibility Verification Application Submitted Page
- The Accessibility Verification Application Submitted page confirms to wheelers that their application to verify a business’s accessibility features has been successfully submitted.
- The page is presented in a clear, focused container with a prominent heading and confirmation message.
- Confirmation Details:
- Clearly states the business name for which the application was submitted.
- Informs the user that an admin will review their application as soon as possible.
- Next Steps:
- Explains that, upon approval, the wheeler will:
- Receive an email notification.
- See a link to the verification form in their Accessibility Verification Hub and their dashboard or profile.
- Be able to complete and submit their verification report for the business.
- Navigation:
- Provides a prominent button to visit the Accessibility Verification Hub, allowing users to track the status of their application and access future actions.
- The layout is fully responsive and accessible, ensuring all users can easily understand the status of their application and what to do next.
Accessibility Verification Hub
- The Accessibility Verification Hub provides wheelers with a centralized location to manage all their accessibility verification applications and reports.
- The page is presented in a clear, responsive container with a prominent heading and introductory text.
- Verification Requests Table:
- Displays a sortable, scrollable table listing all verification requests made by the user.
- Each row shows:
- Business name (with direct links to business details).
- Request status (Submitted, Approved, or Rejected), visually indicated with colored badges.
- Date the request was made and, if applicable, the date it was approved.
- Verification report status (Not Submitted, Submitted, or Approved), also shown with badges.
- Context-sensitive action buttons:
- Submit Verification: For approved requests where the report has not yet been submitted, a button links directly to the verification form for that business.
- View Report: For requests where a report has been submitted, a button links to the completed report.
- Cancel Request: For pending requests, a button opens a confirmation modal to cancel the request.
- All modals and buttons are fully accessible and keyboard-navigable.
- No Requests State:
- If the user has not made any verification requests, a friendly info alert is displayed.
- The layout is fully responsive and accessible, ensuring all users can easily track, manage, and act on their verification activities.
<img alt="Accessibility Verification Hub Page" src="/readme-files/accessibility_verification_hub_desktop.png"
Accessibility Verification Form Page
- The Accessibility Verification Form page enables approved wheelers to submit a detailed, photo-supported accessibility report for a business they have visited.
- The form is presented in a clear, focused container with a prominent heading and step-by-step instructions.
- Business Overview:
- Displays the business name and full address at the top for easy reference.
- Reminds the user that their responses are anonymous and will not be shared with the business.
- Confirmed Features Section:
- Lists all accessibility features the business claims to have.
- For each feature, the wheeler can:
- Tick a checkbox to confirm the feature is present.
- Upload a photo as evidence for each confirmed feature, with instant preview and the ability to remove or replace the photo.
- Additional Features Section:
- Lists other possible accessibility features not claimed by the business.
- Wheelers can tick and upload photos for any additional features they observe.
- Mobility Device Section:
- Requires the wheeler to select which mobility device they used during the visit (e.g., wheelchair, scooter).
- Selfie Upload:
- Requires the wheeler to upload a photo of themselves at the business location for verification purposes (not shared publicly).
- Additional Photos:
- Allows uploading of any extra photos taken during the visit that have not already been uploaded for specific features.
- Comments Section:
- Provides a textarea for the wheeler to write a brief report about their accessibility experience at the business.
- Form Features:
- All fields include inline validation and clear error messages.
- Client-side error messages are displayed in a prominent alert area if required fields are missing.
- The form uses CSRF protection and is fully accessible via keyboard and screen readers.
- JavaScript enhances the form for dynamic photo previews, removal, and validation, ensuring a smooth user experience.
- Submission:
- A prominent "Submit Verification" button submits the report.
- Upon successful submission, the wheeler is redirected to a confirmation page and the business owner is notified.
- The layout is fully responsive and accessible, ensuring all users can easily complete and submit their verification report.
<img alt="Accessibility Verification Form Page" src="/readme-files/wheeler_verification_form_desktop.png" style=
Accessibility Verification Report Page
- The Accessibility Verification Report page presents a detailed, read-only summary of a completed accessibility verification submitted by a wheeler for a specific business.
- The page is organized into visually distinct, responsive cards and sections for clarity and ease of navigation.
- Header Section:
- Clearly states the business name and, if permitted, the name of the wheeler who completed the verification (only visible to the wheeler themselves).
- Visit Details:
- Shows the full address of the business visited.
- Displays the date the verification was completed.
- Indicates the type of mobility device used during the visit.
- Accessibility Features:
- Lists all accessibility features confirmed by the wheeler.
- Separately lists any additional features found that were not originally claimed by the business.
- Photo Evidence:
- Two responsive carousels display all photos submitted:
- Feature Photos: Each photo is labeled with the corresponding accessibility feature.
- Other Photos: Any additional photos uploaded during the verification.
- Carousels include navigation controls and are fully accessible.
- Wheeler's Comments:
- Shows the wheeler’s written comments and observations about the business’s accessibility in a styled, readable container.
- Accessibility & Layout:
- The page is fully responsive and accessible, ensuring all users (including admins and business owners) can easily review the verification details and supporting evidence.
- All images include alt text for screen readers.
- Navigation:
- Users can return to the Accessibility Verification Hub or the Business Dashboard from this page.
<img alt="Accessibility Verification Report Page" src="/readme-files/wheeler_verification_report_desktop.png" style
Business Listing Details Page
- The Business Listing Details page provides wheelers with comprehensive, public-facing information about a business they have applied to verify or have been approved to verify, accessible via a link from the Accessibility Verification Hub.
- Header Section:
- Displays the business logo (if available) and business name in a visually prominent, accessible layout.
- Business Details Card:
- Shows key information in a responsive table, including categories, address, website, public email, public phone, and social media links.
- All links are accessible and open in new tabs where appropriate.
- Location Map:
- An interactive map displays the business’s location, helping wheelers plan their visit.
- Description & Services Card:
- Lists the business description, services offered, and any special offers for wheelers.
- Shows the current accessibility verification status, with context-sensitive actions:
- If the business is already verified by wheelers, a green badge is shown.
- If the user is approved to verify, a button links directly to the verification form.
- If the user has applied but not yet been approved, a status message is shown.
- If the business has requested verification but the user has not yet applied, a button invites them to apply and highlights the reward.
- If no verification is requested, a badge indicates this.
- Accessibility Features Card:
- Lists all accessibility features as visually distinct badges.
- If no features are set, displays "None."
- Opening Hours Card:
- Displays opening hours in a responsive table, with clear indication of closed days and multiple periods per day if set.
- Responsive Layout:
- The page uses Bootstrap cards, tables, and badges for a clean, modern, and accessible design.
- All content is mobile-friendly and accessible via keyboard and screen readers.
- Dynamic Content:
- All information is dynamically rendered based on the business’s data and the user’s verification status, ensuring wheelers see only relevant actions and information.
Payments & Membership
- Stripe integration enables secure online payments for both membership upgrades and accessibility verification requests.
- Businesses can select from multiple membership tiers (Free, Standard, Premium), each unlocking different levels of visibility and features in search results.
- The checkout process uses Stripe PaymentIntent for real-time, PCI-compliant card processing, with clear feedback for payment success or failure.
- Payment forms are styled with Bootstrap and include inline validation and error handling.
- After successful payment, users are redirected to a confirmation page and receive an automated email receipt.
- All payment activity (including pending, successful, and failed payments) is tracked and visible in the business dashboard.
- Membership status and renewal dates are clearly displayed, with prompts to upgrade or renew as needed.
- Businesses can view their payment history and download receipts for their records.
- Verification requests that require payment are seamlessly integrated into the checkout flow, ensuring businesses can easily pay and track the status of their verification applications.
- Stripe webhooks are used to securely update payment and membership status in real time, even if the user closes the browser during checkout.
- Automated email notifications are sent for payment confirmations, membership changes, and verification request updates.
- All payment and membership actions are protected by authentication and authorisation checks to ensure only business owners can manage their own payments and upgrades.
Checkout Page
- The Checkout page enables business owners to securely purchase or upgrade their membership tier, or pay for accessibility verification requests, using Stripe integration.
- The page is presented in a visually distinct, centered container for clarity and focus, styled with Bootstrap for accessibility and consistency.
- Purchase Summary:
- Clearly displays whether the user is purchasing a membership tier or requesting wheeler verification.
- Shows the selected membership tier, its benefits, and the annual price, or the verification cost (which may be free for Premium members).
- Allows users to change their selected membership tier before payment via an interactive card-based selector.
- Contact & Billing Details:
- Collects full name, email, phone number, and billing address in a structured, accessible form.
- All fields include inline validation and clear error messages.
- Payment Details:
- Integrates Stripe Elements for secure, PCI-compliant card entry, with real-time validation and error feedback.
- Payment summary and charge warning are clearly displayed, including whether the verification is free or the exact amount to be charged.
- User Experience:
- A loading spinner overlay appears during payment processing to prevent duplicate submissions and provide feedback.
- All interactive elements are accessible via keyboard and screen readers.
- Users can cancel the checkout process at any time, with a confirmation modal to prevent accidental loss of progress.
- After Payment:
- On successful payment, users are redirected to a confirmation page and receive an automated email receipt.
- Payment status and membership/verification updates are reflected in the Business Dashboard.
- The layout is fully responsive, ensuring a seamless experience on all devices.
<img alt="Checkout Page" src="/readme-files/checkout_desktop.png"
Payment Success Page
- The Payment Success page confirms to business owners that their payment for a membership upgrade or accessibility verification request has been processed successfully.
- The page is presented in a visually distinct, centered container with a prominent "Payment Successful" heading and confirmation message.
- Confirmation Details:
- Clearly thanks the user for their payment and informs them that a confirmation email will be sent to their provided email address.
- Purchase and Billing Information:
- Displays a summary card with all relevant purchase details, including:
- Purchase type (e.g., Membership Upgrade, Verification Request) and the specific membership tier if applicable.
- Purchase amount in GBP.
- Unique reference number for the transaction.
- Purchase date.
- Full name, email address, and phone number used for the purchase.
- Full billing address, including street, city, county, and postcode.
- Navigation:
- Provides a prominent button to return to the Business Dashboard, allowing users to immediately manage their business or view updated membership status.
- The layout is fully responsive and accessible, ensuring all users can easily review their payment details and next steps.
<img alt="Payment Success Page" src="/readme-files/payment_success_desktop.png" style
- Accessible contact form for all users to reach support.
- Confirmation message shown after successful submission.
- The contact form submissions are sent to the admin email configured in settings.
Error Handling
- Custom 404 error page guides users back to the dashboard if they encounter an invalid URL.
- All forms and workflows include robust validation and clear error messages.
Back to top ⇧
Technologies Used
Languages Used
Libraries and Frameworks
-
Django is the web framework.
-
Bootstrap 5 is a CSS library used throughout the website to help with styling and responsiveness.
-
Bootstrap Icons were imported into the style.css file and used to create a better visual experience for UX purposes.
-
Google Fonts were used throughout the site.
-
Choices.js is a JavaScript library used to create a multiselect field for the Report model attribute reasons.
-
MapLibre GL JS is a JavaScript library used following pages to create the interactive map: Business Search, Business Details, Register Business, Edit Business, and Business Dashboard.
-
Stripe.js is used for secure, PCI-compliant payment processing on checkout and membership pages.
Django Packages and Dependencies
-
Django Allauth is used for user authentication, registration, and account management.
-
Django Crispy Forms is used to control the rendering of the forms.
-
crispy-bootstrap5 is used as the crispy forms template pack for Bootstrap 5 styling.
-
WhiteNoise is used to serve static files in production with no separate web server needed.
-
Psycopg is a PostgreSQL/PostGIS database adapter, which means that it is a bridge between Django and the PostgreSQL database.
-
DJ_Databse-URL is used to parse the DATABASE_URL.
-
Gunicorn is used as Python WSGI HTTP Server for UNIX to support the deployment of Django application.
-
Cloudinary is used as image management solution
-
django-storages is used for integrating with Cloudinary and managing static/media files.
-
django-countries is used for country field choices in user and business forms.
Database Management
-
Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
Heroku is used to deploy the website.
-
Am I Responsive was used to preview the website across a variety of popular devices.
-
Coolors was used to create the colour palette image.
-
GitHub was used as follows:
- Together with Git for version control and code hosting.
- This README file serves as the main documentation for the project.
- Automatic deployment to Heroku every time the main branch is pushed to.
-
Balsamiq was used to create the wireframes during the design phase of the project.
-
Am I Responsive? was used to view the responsiveness of the website throughout the development process, and to generate the mockup images used at the top of this README.
-
Chrome DevTools was used during the development process to:
- view how the code renders in a web browser
- evaluate how the code functions and ensure it behaves as expected
- test responsiveness
- debug and refine code
-
W3C Markup Validator
- W3C Markup Validator was used to validate the HTML code.
-
W3C CSS Validator
- W3C CSS Validator was used to validate the CSS code.
-
JSHint JavaScript Code Quality Tool was used to validate the JavaScript code.
-
Favicon.io was used to create the site favicons.
Back to top ⇧
Demo Data & Fake User/Business Generation
To support development, testing, and demonstration of the Mobility Mapper Business Portal, the project includes a robust system for generating realistic fake users, businesses, and associated verification data. This is achieved through a custom Python script and a set of fixture files.
Overview
- The script
scripts/generate_fake_users.py creates a large set of demo users (both wheelers and business owners), business listings, and accessibility verification records.
- The generated data is designed to closely mimic real-world usage, with unique names, emails, profile photos, business logos, and a variety of accessibility features, categories, and membership tiers.
- The script also generates verification applications and reports, including photo evidence, to fully populate the portal for demo and testing purposes.
How It Works
Fixtures Used
The script relies on several fixture files to provide lookup data and ensure consistency:
fixtures/accessibility_features.json — List of all possible accessibility features.
fixtures/business_categories.json — Grouped business categories for classification.
fixtures/membership_tiers.json — Definitions and benefits of each membership tier.
fixtures/counties.json — List of UK counties for user and business addresses.
fixtures/age_groups.json — Age group options for user profiles.
fixtures/mobility_devices.json — List of supported mobility devices for wheelers.
These fixtures are loaded into the database before running the fake data generation script, ensuring all foreign key relationships are valid.
Loading Demo Data
To load the demo data for development or testing:
- Load the base fixtures:
python manage.py loaddata fixtures/accessibility_features.json fixtures/business_categories.json fixtures/membership_tiers.json fixtures/counties.json fixtures/age_groups.json fixtures/mobility_devices.json
Testing
Extensive testing documentation can be found here.
Deployment
This website was developed using Visual Studio Code, which was then committed and pushed to GitHub using the terminal.
Deploying on Heroku
To deploy this site to Heroku from its GitHub repository, take following steps:
-
Update the settings.py file:
- Add 'your_app_name.heroku.com' to ALLOWED_HOSTS. Also add your domain name, if you have one.
- Add the following to CSRF_TRUSTED_ORIGINS:
"https://*.your_domain_name",
Note that the following settings have already been added for deployment:
- INSTALLED_APPS: 'cloudinary_storage', 'cloudinary',
- MIDDLEWARE: 'whitenoise.middleware.WhiteNoiseMiddleware'
- The database engine has been overridden to use GeoDjango's PostGIS backend:
DATABASES['default']['ENGINE'] = 'django.contrib.gis.db.backends.postgis'
- CSRF_TRUSTED_ORIGINS: "https://.azurewebsites.net" "https://.herokuapp.com",
- STATIC_ROOT and STATICFILES_DIRS
- STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
-
In your project root, create a file named Procfile (no extension) with:
web: gunicorn config.wsgi
-
Push to GitHub
- Commit all changes.
- Push your code to your GitHub repository.
-
Create the Heroku App:
- Log in to Heroku
- Select New > Create new app
- Choose a name for your app and select the region.
-
Provision Azure PostgreSQL Database
- In the Azure Portal, create a new Azure Database for PostgreSQL (Flexible Server recommended).
- Enable the PostGIS extension on your Azure PostgreSQL instance. Connect to your database (e.g., with psql) and run:
CREATE EXTENSION postgis;
- Make sure your Azure PostgreSQL firewall allows connections from Heroku’s IP ranges.
- Note your database host, name, username, and password.
- Configure Heroku to Use Azure PostgreSQL
- In your Heroku app dashboard, go to the 'Settings' tab and click 'Reveal Config Vars'.
- Add a DATABASE_URL variable in the following format:
postgres://<username>:<password>@<host>:5432/<database>?sslmode=require
- Go to your Stripe Dashboard and get
-
Your Stripe API keys and add them to Heroku Config Vars:
- STRIPE_PUBLIC_KEY
- STRIPE_SECRET_KEY
-
Generate a webhook endpoint in your Stripe Dashboard for your Heroku app URL (e.g., https://your-app-name.herokuapp.com/stripe/webhook/) and add the signing secret to Heroku Config Vars:
- Add the remaining environment variables:
- SECRET_KEY
- CLOUDINARY_URL
- OS_MAPS_API_KEY
- Email settings for your email provider:EMAIL_HOST_USER, EMAIL_HOST_PASSWORD, EMAIL_HOST.
- ADMIN_NAME, ADMIN_EMAIL
- Add the Heroku Geo Buildpack to install the GIS libraries GDAL, GEOS and PROJ, which are required for the PostGIS database extension. Go to the CLI by clicking More > Run Console, and enter
heroku create --buildpack https://github.com/heroku/heroku-geo-buildpack.git
- Connect Heroku to GitHub
- In the 'Deploy' tab, connect your Heroku app to your GitHub repository.
- Select the branch you want to deploy from.
- Deploy the App
- In the 'Deploy' tab, click 'Deploy Branch'.
- Wait for the build to complete.
- Run Migrations and Create Superuser
- In the Heroku dashboard, go to 'More' > 'Run Console'.
- Run:
python manage.py migrate
python manage.py createsuperuser
- Upload the Fixtures to the Database
- In the Heroku dashboard, go to 'More' > 'Run Console'.
- Run:
python manage.py loaddata mapper/fixtures/*.json
- Visit the URL provided by Heroku to see your deployed app.
Forking the Repository
Forking a GitHub Repository makes a copy of the original repository on your GitHub account, which you can view and/or make changes without affecting the original repository. To fork a repository:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the top of the repository, on the right side of the page, select "Fork"
- You should now have a copy of the original repository in your GitHub account.
Creating a Clone
How to run this project within a local IDE, such as VSCode:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- Under the repository name, click "Clone or download".
- In the Clone under the HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone', and then paste the URL you copied in Step 3.
git clone https://github.com/SonyaJane/mobility-mapper-business-portal.git
- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here
Finished Product
| Page |
Desktop |
Mobile |
| Landing Page |
 |
 |
| Contact Page |
 |
 |
| Sign Up Page |
 |
 |
| Sign In Page |
 |
 |
| Sign Out Page |
 |
 |
| Change Password Page |
 |
 |
| Reset Password Page |
 |
 |
| Personal Dashboard |
 |
 |
| Edit Profile Page |
 |
 |
| Register Business Page |
 |
 |
| Business Dashboard |
 |
 |
| Edit Business Page |
 |
 |
| Delete Business Page |
 |
 |
| Business Search Page |
 |
 |
| Request Verification Page |
 |
 |
| View membership Page |
 |
 |
| Upgrade Membership Page |
 |
 |
| Checkout Page |
 |
 |
| Payment Success Page |
 |
 |
| Business Search Page |
 |
 |
| Apply to Verify Accessibility Page |
 |
 |
| Application Submitted Page |
 |
 |
| Accessibility Verification Hub Page |
 |
 |
| Accessibility Verification Form Page |
 |
 |
| Accessibility Verification Report Page |
 |
 |
| Business Details Page |
 |
 |
| 404 Error Page |
 |
 |
Credits
Content
- All content was written by the developer.
- Home page hero image: Photo taken by Marcus Aurelius on Pexels
- Map tiles: Provided by Ordnance Survey via their OS Maps API
- Fake business logos and user profile photos: Generated using ChatGPT
- Fake verification photos were generated using ChatGPT